<template>
  <div class="maintenance-dashboard">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>我的保养中心</h2>
      <p class="subtitle">跟踪里程与保养记录，呵护您的爱车</p>
    </div>

    <!-- 里程进度条卡片 -->
    <el-card class="mileage-card">
      <div class="card-content">
        <div class="mileage-info">
          <div class="current-mileage">{{ currentMileage }} km</div>
          <div class="target-mileage">/ 2000 km</div>
        </div>
        <el-progress 
          :percentage="mileagePercentage" 
          :stroke-width="24" 
          :color="progressColor"
          :format="formatProgress">
        </el-progress>
        <div class="maintenance-status">
          <el-tag :type="statusType" size="medium">{{ statusText }}</el-tag>
        </div>
      </div>
    </el-card>

    <!-- 保养记录列表 -->
    <div class="maintenance-records">
      <h3 class="section-title">保养历史记录</h3>
      <div v-if="maintenanceList.length === 0" class="empty-state">
        <el-empty description="暂无保养记录"></el-empty>
      </div>
      
      <div v-else class="records-container">
        <div 
          v-for="(record, index) in maintenanceList" 
          :key="record.id"
          class="record-card"
          :class="{ 'fade-in': index < visibleRecords }">
          
          <div class="record-header">
            <div class="record-date">{{ record.date }}</div>
            <el-tag :type="getTypeTag(record.type)">{{ getTypeText(record.type) }}</el-tag>
          </div>
          
          <div class="record-body">
            <div class="record-mileage">
              <span class="label">保养里程:</span>
              <span class="value">{{ record.mileage }} km</span>
            </div>
            <div class="record-description">{{ record.description }}</div>
          </div>
          
          <div class="record-footer">
            <div class="service-center">
              <el-icon><Building /></el-icon>
              <span>{{ record.serviceCenter }}</span>
            </div>
          </div>
        </div>
        
        <div v-if="visibleRecords < maintenanceList.length" class="load-more">
          <el-button @click="loadMoreRecords" type="primary" plain>
            加载更多 <el-icon><ChevronDown /></el-icon>
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'

// 车辆里程数据
const currentMileage = ref(1500) // 当前里程
const targetMileage = 2000 // 保养周期里程

// 保养记录数据
const maintenanceRecords = ref([
  {
    id: 1,
    date: '2023-11-15',
    type: 'regular',
    mileage: 2000,
    description: '更换机油、机滤，检查轮胎气压和制动系统',
    serviceCenter: '城市汽车服务中心'
  },
  {
    id: 2,
    date: '2023-05-20',
    type: 'major',
    mileage: 4000,
    description: '大保养：更换机油、机滤、空滤、火花塞，检查变速箱油',
    serviceCenter: '专业汽车维修店'
  },
  {
    id: 3,
    date: '2022-12-10',
    type: 'repair',
    mileage: 5500,
    description: '维修：更换右前减震器，四轮定位',
    serviceCenter: '城市汽车服务中心'
  },
  {
    id: 4,
    date: '2022-06-05',
    type: 'regular',
    mileage: 7500,
    description: '更换机油、机滤，检查轮胎磨损情况',
    serviceCenter: '快速保养中心'
  },
  {
    id: 5,
    date: '2022-01-15',
    type: 'regular',
    mileage: 10000,
    description: '首保：更换机油、机滤，全车检查',
    serviceCenter: '品牌4S店'
  }
])

// 控制可见记录数量（用于懒加载效果）
const visibleRecords = ref(3)
const recordsPerLoad = 2

// 计算属性 - 里程进度相关
const mileagePercentage = computed(() => {
  return Math.min(Math.round((currentMileage.value / targetMileage) * 100), 100)
})

const progressColor = computed(() => {
  const percentage = mileagePercentage.value
  if (percentage < 70) return '#67C23A' // 绿色
  if (percentage < 90) return '#E6A23C' // 黄色
  return '#F56C6C' // 红色
})

const statusText = computed(() => {
  const percentage = mileagePercentage.value
  if (percentage < 70) return '距离下次保养还早'
  if (percentage < 90) return '接近保养周期'
  return '已超过保养周期'
})

const statusType = computed(() => {
  const percentage = mileagePercentage.value
  if (percentage < 70) return 'success'
  if (percentage < 90) return 'warning'
  return 'danger'
})

// 计算属性 - 过滤和排序保养记录
const maintenanceList = computed(() => {
  return [...maintenanceRecords.value].sort((a, b) => new Date(b.date) - new Date(a.date))
})

// 加载更多记录
const loadMoreRecords = () => {
  visibleRecords.value = Math.min(
    visibleRecords.value + recordsPerLoad,
    maintenanceList.value.length
  )
}

// 类型转换方法
const getTypeText = (type) => {
  const typeMap = {
    'regular': '常规保养',
    'major': '大保养',
    'repair': '维修保养'
  }
  return typeMap[type] || '未知类型'
}

const getTypeTag = (type) => {
  const typeTagMap = {
    'regular': 'success',
    'major': 'primary',
    'repair': 'warning'
  }
  return typeTagMap[type] || 'info'
}

// 生命周期钩子 - 数据持久化
onMounted(() => {
  // 从本地存储加载数据
  const savedMileage = localStorage.getItem('currentMileage')
  if (savedMileage) {
    currentMileage.value = parseInt(savedMileage)
  }
  
  const savedRecords = localStorage.getItem('maintenanceRecords')
  if (savedRecords) {
    maintenanceRecords.value = JSON.parse(savedRecords)
  }
})

// 监听数据变化并保存到本地存储
watch(currentMileage, (newVal) => {
  localStorage.setItem('currentMileage', newVal)
})

watch(maintenanceRecords, (newVal) => {
  localStorage.setItem('maintenanceRecords', JSON.stringify(newVal))
})
</script>

<style scoped>
.maintenance-dashboard {
  padding: 30px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
}

.subtitle {
  color: #7f8c8d;
  margin-top: 5px;
  font-size: 16px;
}

.mileage-card {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  padding: 30px;
  margin-bottom: 30px;
  transition: all 0.3s ease;
}

.mileage-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.card-content {
  text-align: center;
}

.mileage-info {
  display: flex;
  justify-content: center;
  align-items: baseline;
  margin-bottom: 20px;
}

.current-mileage {
  font-size: 36px;
  font-weight: 600;
  color: #333;
  margin-right: 10px;
}

.target-mileage {
  font-size: 18px;
  color: #7f8c8d;
}

.maintenance-status {
  margin-top: 20px;
}

.section-title {
  font-size: 20px;
  color: #333;
  margin: 20px 0 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f2f5;
}

.records-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.record-card {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.5s ease;
  animation-fill-mode: forwards;
}

.fade-in {
  animation: fadeInUp 0.5s ease forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.record-card:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background-color: #f5f7fa;
}

.record-date {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.record-body {
  padding: 20px;
}

.record-mileage {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  font-size: 15px;
}

.label {
  color: #7f8c8d;
  margin-right: 10px;
}

.value {
  color: #3498db;
  font-weight: 500;
}

.record-description {
  color: #555;
  line-height: 1.6;
  font-size: 15px;
}

.record-footer {
  padding: 15px 20px;
  border-top: 1px solid #f0f2f5;
  display: flex;
  align-items: center;
  color: #7f8c8d;
  font-size: 14px;
}

.service-center .el-icon {
  margin-right: 5px;
  color: #3498db;
}

.load-more {
  text-align: center;
  margin: 30px 0;
}

.empty-state {
  padding: 40px 0;
  text-align: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .maintenance-dashboard {
    padding: 20px 15px;
  }
  
  .mileage-card {
    padding: 20px;
  }
  
  .current-mileage {
    font-size: 28px;
  }
  
  .target-mileage {
    font-size: 16px;
  }
}
</style>